<template>
	<view class="container">
		<!-- 轮播图 -->
		<swiper indicator-dots autoplay circular :interval="5000" :duration="150" indicator-color="rgba(255, 255, 255, 0.9)"
		 indicator-active-color="#ff791f" class="tui-banner-swiper" v-if="banner.length > 0" style="padding-top:20rpx;border-radius: 15rpx;">
			<swiper-item v-for="(item,index) in banner" :key="index" @tap.stop="href(item.url)" style="border-radius: 15rpx;">
				<view class="tui-banner-title">{{item.title}}</view>
				<image :src="item.image" class="tui-slide-image" mode="aspectFill" style="border-radius: 15rpx;"/>
			</swiper-item>
		</swiper>
		
		<view class="inv-h-w">
			<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="changeTab(0)">进行中</view>
			<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="changeTab(1)">已结束</view>
		</view>
		<view class="tui-product-list" v-show="Inv == 0">
				

			<view class="tui-product-container" v-if="!isList">
				<block v-for="(item, index) in productList" :key="index" >
					<!-- <template is="productItem" data="{{item,index:index}}" /> -->
					<!--商品列表-->
					<view class="tui-pro-item" :class="[isList ? 'tui-flex-list' : '']" hover-class="hover" :hover-start-time="150" @tap="detail(item)">
						<image :src="item.thumbnail" class="tui-pro-img" :class="[isList ? 'tui-proimg-list' : '']"   style="width: 260rpx;max-height: 260rpx;border-radius: 30rpx;"/>
						<view class="tui-pro-content" style="width: 450rpx;height: 272rpx;">
							<view class="tui-pro-tit">{{ item.title }}</view>
							<view>
								<block v-for="(item2, index2) in item.labels" :key="index2" >
									<tui-icon  name="member" :size='14' color="#f4cccc"></tui-icon><text style="padding-right:10rpx;font-size: 24rpx;">{{item2}}</text>
								</block>
							</view>
							<view>
								<view class="tui-pro-price">
									<tui-icon  name="clock" :size='14' ></tui-icon><text class="tui-factory-price">{{ item.activitytimestr }}</text>
									<tui-icon  name="people" :size='14'  style="padding-left:20rpx"></tui-icon><text class="tui-factory-price">已报名: {{ item.num }}人</text>
								</view>
								<view class="tui-pro-price">
									<text class="tui-sale-price">￥{{ item.price }}</text>
								</view>
							</view>
						</view>
					</view>
					<!--商品列表-->
				</block>
			</view>

		</view>
		<view class="" v-show="Inv == 1" style="padding-top:30rpx;">
				<block v-for="(item, index) in productList" :key="index" >
					<!-- <template is="productItem" data="{{item,index:index}}" /> -->
					<!--商品列表-->
					<view class="tui-pro-item" :class="[isList ? 'tui-flex-list' : '']" hover-class="hover" :hover-start-time="150" @tap="product(item)">
						<image :src="item.thumbnail" class="tui-pro-img" :class="[isList ? 'tui-proimg-list' : '']"  style="width: 260rpx;max-height: 260rpx;border-radius: 30rpx;"/>
						<view class="tui-pro-content jieshu">
							<view class="tui-pro-tit" style="padding-bottom: 10rpx;">{{ item.title }}</view>
							<view>
								<block v-for="(item2, index2) in item.labels" :key="index2" >
									<tui-icon  name="member" :size='14' color="#f4cccc"></tui-icon><text style="padding-right:10rpx;font-size: 24rpx;">{{item2}}</text>
								</block>
							</view>
							<view>
								<view class="tui-pro-price">
									<tui-icon  name="clock" :size='14' ></tui-icon><text class="tui-factory-price">{{ item.activitytimestr }}</text>
									<tui-icon  name="people" :size='14'  style="padding-left:20rpx"></tui-icon><text class="tui-factory-price">已报名: {{ item.num }}人</text>
								</view>
								<view class="tui-pro-price">
									<text class="tui-sale-price">￥{{ item.price }}</text>
								</view>
							</view>
						</view>
					</view>
				</block>
		</view>
		

		
	</view>
</template>

<script>
	var _self,
		api = require('@/common/api.js')
	import tuiIcon from "@/components/icon/icon"
	import tuiGrid from "@/components/grid/grid"
	import tuiGridItem from '@/components/grid-item/grid-item'
	export default {

		components: {
			tuiGrid,
			tuiGridItem,
			tuiIcon,
		},
		data() {
			return {

				banner:[],
				id:'',
				Inv:0,
				productList: [],
			}
		},
		onLoad() {
			
			this.getSubCategories(this.Inv);
			this.loadBanner();
			
			// this.distance(30.722558975219727,111.33262634277344,30.791611,111.310880)//距离
		},
		methods: {
			//加载幻灯片
			loadBanner(){
				api.get({
					url: 'order/lvyou',
					success: data => {
						if (data.code == 1) {
							this.banner = data.data
						}
					}
				});
			},
			//获取分类数据
			getSubCategories(id){

				api.get({
					url:"order/subCategories",
					data:{id:id},
					success: res => {
						this.productList = res.data;
						
					}
				});	


			},
			changeTab(data){
				this.Inv = data;
				this.getSubCategories(this.Inv);
					 
			},
			href:function(url){
				uni.navigateTo({
					url:url
				})
			},
			detail(e){
				console.log(e);
				uni.redirectTo({
					url: '/pages/mall-extend/goodsDetail/goodsDetail?id='+e.id
				});
			},
			product(e){
				uni.showToast({
					title: e.title+",该活动已结束",
					icon:'none',
					duration: 2000
				});
			}
			// distance(la1, lo1, la2, lo2) {
			// 	var La1 = la1 * Math.PI / 180.0;
			// 	var La2 = la2 * Math.PI / 180.0;
			// 	var La3 = La1 - La2;
			// 	var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
			// 	var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));
			// 	s = s * 6378.137;//地球半径
			// 	s = Math.round(s * 100) / 100;
			// 	console.log("计算结果",s);
			// 	return s;
			// },
		},
		

	}
</script>

<style>
	/* 商品列表*/
	.jieshu{background-image:url('/static/images/lv/jishu.png');background-size: 40% 50%;background-repeat: no-repeat;background-position: 100% 100%;width: 450rpx;height: 272rpx;}
	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding-top:30rpx;
	}
	
	.tui-product-container {
		flex: 1;
		margin-right: 10rpx;
	}
	
	.tui-product-container:last-child {
		margin-right: 0;
	}
	
	.tui-pro-item {
		position: relative;
		border-bottom: 1px solid rgba(0,0,0,.1);
		padding: 30rpx 0;
		min-height:240rpx;

	}
	
	.tui-flex-list {
		display: flex;
		margin-bottom: 1rpx !important;
		border-bottom: 1rpx solid #ccc;
		padding-bottom: 20rpx;

	}
	
	.tui-pro-img {
		width: 260rpx;
		height:260rpx;
		display: block;
	}
	
	.tui-proimg-list {
		width: 260rpx;
		height: 260rpx !important;
		flex-shrink: 0;
		border-radius: 12rpx;
	}
	
	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 12rpx;
		position: absolute;
		left: 130px;
		top: 20rpx;

	}
	
	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	
	.tui-pro-price {
		padding-top: 18rpx;
	}
	
	.tui-sale-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}
	
	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		padding-left: 6rpx;
	}
	
	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}
	/* 商品列表*/
	.inv-h-w{background-color: #FFFFFF;height: 100upx;display: flex;}
	.inv-h{font-size: 30upx;flex: 1;text-align: center;color: #C9C9C9;height: 100upx;line-height: 100upx;}
	.inv-h-se{color: #FF9014;border-bottom: 4upx solid #FF9014;}

	.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-title {
		padding: 50upx 30upx 30upx 30upx;
		font-size: 32upx;
		color: #333;
		box-sizing: border-box;
		font-weight: bold;
		clear: both;
	}

	.tui-grid-icon {
		width: 100upx;
		height: 100upx;
		margin: 0 auto;
		text-align: center;
		vertical-align: middle;
	}

	.tui-grid-icon image {
		width:100rpx;
		height:100rpx;
	}
	

	.tui-grid-label {
		display: block;
		text-align: center;
		font-weight: 400;
		color: #333;
		font-size: 28upx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 10upx;
	}
	.tui-grid-label-5 {
		margin-top: 0 !important;
		color: #8a5966 !important;
	}
	
	.tui-banner-swiper {
		width: 100%;
		height: 300rpx;
		position: relative;
	}
	
	.tui-slide-image {
		width: 100%;
		height: 300rpx;
		display: block;
	}
	
	.tui-banner-title {
		width: 100%;
		height: 100rpx;
		position: absolute;
		z-index: 9999;
		color: #fff;
		bottom: 0;
		padding: 0 30rpx;
		padding-top: 25rpx;
		font-size: 34rpx;
		font-weight: bold;
		background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
		box-sizing: border-box;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.tui-banner-swiper .wx-swiper-dots.wx-swiper-dots-horizontal {
		width: 100%;
		top: 280rpx;
		text-align: right;
		padding-right: 30rpx;
		box-sizing: border-box;
	}
	
	.tui-banner-swiper .wx-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}
	
	.tui-banner-swiper .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 8rpx;
	}
	
	.tui-banner-swiper .wx-swiper-dot-active::before {
		background: #5677fc;
	}
	
	.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
		width: 18rpx;
	}
	
</style>
